<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card class="box-card">
      <el-button type="primary">添加分类</el-button>
      <ZkTable :data="categories" :columns="columnsOption" 
        border :expand-type="false" show-index :selection-type="false" >
            <template #isdeleted="{ row }">
                <i v-if="row.cat_deleted==false" class="el-icon-success nodeleted"></i>
                <i v-else class="el-icon-error deleted"></i>
            </template>
            <template #level="{ row }">
                <el-button v-if="row.cat_level==0 " type="primary" plain size="mini" disabled>一级</el-button>
                <el-button v-if="row.cat_level==1 " type="succsee" plain size="mini" disabled>二级</el-button>
                <el-button v-if="row.cat_level==2 " type="waring" plain size="mini" disabled>三级</el-button>
                <!-- <i v-if="row.cat_level==false" class="el-icon-success nodeleted"></i>
                <i v-else class="el-icon-error deleted"></i> -->
            </template>
            <template  #operate> 
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button type="danger"  icon="el-icon-delete" size="mini">删除</el-button>
            </template>
        </ZkTable>
  <div class="block">
   <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination> -->
  </div>
    </el-card>
  </div>
</template>
<script>
import ZkTable  from 'vue-table-with-tree-grid'
export default {
    components:{
        ZkTable
    },
  data() {
    return {
      search: "",
      total:0,
      params:{
        pagenum:1,
        query:'',
        pagesize:5,
      },
      categories:[],
      columnsOption:[
          {label:"分类名称",prop:"cat_name"},
          {label:"是否有效",prop:"cat_deleted",type:"template",template:"isdeleted"},
          {label:"排序",prop:"cat_level",type:"template",template:"level"},
          {label:"操作",type:"template",template:"operate"}
      ]
    }
  },
  methods: {
      handleSizeChange(val) {
        this.params.pagesize=val
        this.LoadCategories();
      },
      handleCurrentChange(val) {
        this.params.pagenum=val
        this.LoadCategories();
      },
    async  LoadCategories(){
        try {
        let result= await this.$api.getCategories(this.params);
        this.total=result.total;
        this.params.pagenum=result.pagenum
        this.categories=result.result
        console.log(this.categories)
        } catch (error) {
            console.log(error)
        }
      }
  },
  created() {
      this.LoadCategories();
  },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-button {
  margin-bottom: 20px;
}
.block{
    margin-top: 50px;
}
.nodeleted,.deleted{
    font-size: 20px;
}
.nodeleted{
    color:@success;
}
.deleted{
    color: @dange;
}
</style>